<template>
  <div class="s-tab-bar">
    <uv-tabbar
      :value="tabActive"
      safeAreaInsetBottom
      activeColor="#6e75ff"
      inactiveColor="#b6b6b6"
      @change="handleChange"
    >
      <uv-tabbar-item
        v-for="(item, index) in list"
        :key="index"
        :text="t(item.label)"
      >
        <block #active-icon>
          <image mode="aspectFill" class="tabbar-icon" :src="item.activeIcon" />
        </block>
        <block #inactive-icon>
          <image
            mode="aspectFill"
            class="tabbar-icon"
            :src="item.inactiveIcon"
          />
        </block>
      </uv-tabbar-item>
    </uv-tabbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { useRoute, useRouter } from "simpleRouter";
const route = useRoute();
const router = useRouter();
const list = ref([
  {
    label: "tabbar.home",
    link: "/",
    activeIcon: "/static/images/tabbar/home-active.png",
    inactiveIcon: "/static/images/tabbar/home.png",
  },
  {
    label: "tabbar.case",
    link: "/use",
    activeIcon: "/static/images/tabbar/case-active.png",
    inactiveIcon: "/static/images/tabbar/case.png",
  },
]);

let tabActive = ref(0);

onMounted(() => {
  const index = list.value.findIndex((item) => item.link === route.value.path);
  tabActive.value = index;
});

const handleChange = (i) => {
  tabActive.value = i;
  const path = list.value[i].link;
  router.push({ path });
};
</script>

<style lang="scss" scoped>
.tabbar-icon {
  width: 40upx;
  height: 40upx;
}
</style>
